<template>
	<view class="address-view">
		<view class="address-list">
			<view class="address-item" v-for="item in list" :key="item.ressid" @click="ht(item.ressid)">
				<view class="content">
					<view class="name">
						{{ item.name }} {{ item.phone }}
						<van-tag v-if="item.fault == '1' " type="danger" round>默认</van-tag>
					</view>
					<view class="address">
						{{item.province}} {{item.city}} {{item.district}} 
					</view>
				</view>
				<van-icon name="edit" class="address-edit" @click="goAddressEdit(item.ressid)" />
			</view>
		</view>
	
		<view class="address-bottom"><van-button block round color="#1baeae" @click="goAddressEdit">新增地址</van-button></view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { getAddressDetail } from '/api/modules/address1'
import { reactive, toRefs } from 'vue'
import { UserStore } from '../../store/user';
import { storeToRefs } from 'pinia'
const userStore = UserStore()

const state = reactive({ list: [] })

const init = async (id) => {
	uni.showLoading({ title: '加载中...', mask: true })
	const a = {
		id: userStore.id
	}
	const data  = await getAddressDetail(a)
	state.list = data
	uni.hideLoading()
} 

const goAddressEdit = (id) => {
	uni.redirectTo({ url: `/subpkg/address/address?id=${id}` })
}
// 页面加载
onLoad((options) => {
	state.ji = options.ji
})
	const ht =  (res) => {
		if(state.ji){
			uni.redirectTo({
				url: `../Confirm order/Confirm order?ressid=${res}&id=${state.ji}`,
			})
		}
	} 
// 页面显示
onShow(() => {
	init()
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})

const { list } = toRefs(state)
</script>

<style lang="scss">
.address-list {
	box-sizing: border-box;
	height: 100%;
	padding: 24rpx 24rpx 160rpx;
	.address-item:not(:last-child) {
		margin-bottom: 24rpx;
	}
	.address-item {
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		position: relative;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		color: #232323;
		background-color: #fff;
		font-size: 28rpx;
		line-height: 48rpx;
		.content {
			flex: 1;
			padding-right: 88rpx;
			.name {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				font-size: 32rpx;
				line-height: 44rpx;
				.van-tag {
					margin-left: 16rpx;
					padding-top: 0;
					padding-bottom: 0;
					flex: 0;
					line-height: 34rpx !important;
					transform: translateY(-2rpx);
				}
			}
			.address {
				color: #323233;
				font-size: 26rpx;
				line-height: 36rpx;
			}
		}
		.address-edit {
			position: absolute;
			top: 50%;
			right: 32rpx;
			color: #969799;
			font-size: 40rpx;
			transform: translateY(-50%);
			.van-icon {
				padding: 30rpx;
				padding-right: 0;
			}
		}
	}
}

.address-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	box-sizing: border-box;
	width: 100%;
	padding: 0 32rpx;
	background-color: #fff;
	.van-button {
		margin: 10rpx 0;
	}
}
</style>
